<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="关键字">
              <a-input v-model="queryParam.keywords" placeholder="用户名/手机"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-item label="调用次数">
                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="更新日期">
                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="使用状态">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px" v-if="false">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">

    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="name" slot-scope="name,record">
        <img :src="record.face" style="width: 40px; vertical-align: middle;" /> {{record.name}}
      </span>
      <span slot="action" slot-scope="text, record">
        <template >
          <a @click="handleUserManage(record)">成员管理</a>
          <a-divider type="vertical" />
        </template>
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <!--<a-menu-item>-->
                <!--<a-popconfirm title="确定重置为123456" @confirm="resetPassword(record)"  okText="确定" cancelText="取消">-->
    <!--<a href="javascript:;">重置密码</a>-->
  <!--</a-popconfirm>-->
            <!--</a-menu-item>-->
          </a-menu>
        </a-dropdown>
      </span>
    </s-table>

    <a-modal
            title="成员管理"
            :width="1000"
            style="top: 20px;"
            :bodyStyle="{maxHeight:'500px','overflowY':'scroll'}"
            v-model="userVisible"
            @ok="userVisible=false"
    >
      <a-spin :spinning="saveLoading">
        <a-form :form="form">

          <a-table :columns="userColumns" :dataSource="sellerCustomerList" :pagination="userPagination" rowKey="id" :scroll="{ y: 300 }" bordered>
            <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
              <a-input
                      v-model="memberQuery.keywords"
                      placeholder="搜索用户名/手机号"
                      style="width: 188px; margin-bottom: 8px; display: block;"
              />
              <a-button
                      type='primary'
                      @click="memberSearch(selectedKeys, confirm)"
                      icon="search"
                      size="small"
                      style="width: 90px; margin-right: 8px"
              >搜索</a-button>
              <a-button
                      @click="memberSearchReset(selectedKeys, confirm)"
                      size="small"
                      style="width: 90px"
              >重置</a-button>
            </div>


            <span slot="name" slot-scope="name,record">
              <img :src="record.face" style="width: 40px; vertical-align: middle;" /> {{record.name}}
            </span>
            <template slot="action" slot-scope="text,record,index">
              <a-popconfirm @confirm="changeLeader(record,index)"  okText="确定" cancelText="取消">
                <span slot="icon" ></span>
                <div slot="title"  style="line-height: 30px;">
                  <a-icon type="question-circle-o" style="color: red" /> 您确认更换团队关系吗?<br/>
                  <user-picker placeholder="请选择新的团长" style="width: 200px;" :formData="userFormData" field="leader_user_id" />
                </div>
                <a href="javascript:;">更换团长</a>
              </a-popconfirm>
            </template>

          </a-table>
        </a-form>
      </a-spin>
    </a-modal>
  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import AInput from 'ant-design-vue/es/input/Input'
  import moment from 'moment'
  import UserPicker from '@/components/UserPicker/'

  import { getTeamList,getSellerGroupList,getTeamMemberList,changeLeader } from '@/api/team'

  export default {
    name: 'TeamList',
    components: {
      AInput,
      ATextarea,
      STable,
      UserPicker
    },
    data () {
      return {
        visible: false,
        userVisible: false,
        saveLoading:false,
//        description: '全校班级管理。',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        form: this.$form.createForm(this),
        mdl: {},

        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {
        },
        groupOptions:[],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: 'id',
            sorter: true
          },
          {
            title: '团长',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
          },
          {
            title: '手机号',
            dataIndex: 'phone'
          },
          {
            title: '等级',
            dataIndex: 'seller_group_name',
            filters: [
              {
                text: '普通',
                value: '0'
              },
              {
                text: '多媒体',
                value: '1'
              }],
          },
          {
            title: '累计订单',
            dataIndex: 'order_count',
          },
          {
            title: '累计销售额',
            dataIndex: 'order_total_price',
          },
          {
            title: '成员数',
            dataIndex: 'seller_count',
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' },
          }
        ],
        //人员管理表头
        userColumns: [
          {
            title: '#',
            dataIndex: 'id',
            width: '100px'
          },
          {
            title: '用户名',
            dataIndex: 'name',
            width:'250px',
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'name',
            }
          },
          {
            title: '手机号',
            width:'150px',
            dataIndex: 'phone',
          },
          {
            title: '累计销售额',
            width:'150px',
            dataIndex: 'order_total_price',
          },
          {
            title: '客户数',
            dataIndex: 'customer_count',
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' },
          }
        ],
        userPagination:{
        },
        sellerCustomerList:[],
        // 加载数据方法 必须为 Promise 对c象
        loadData: parameter => {
          console.log('loadData');
          console.log(this.queryParam);
          this.queryParam.seller_group_ids = [];
          if(parameter.seller_group_name && parameter.seller_group_name.length){
            this.queryParam.seller_group_ids =  parameter.seller_group_name;
          }
          this.queryParam = Object.assign(parameter, this.queryParam);
          return getTeamList(this.queryParam)
            .then(res => {
              console.log('res');
              return res.data
            })
        },

        userFormData:{
          leader_user_id:undefined,
          user_id:undefined,
        },
        memberQuery:{
          leader_user_id:0,
          keywords:undefined
        },
        selectedRowKeys: [],
        selectedRows: [],
      }
    },
    created () {
//      getRoleList({ t: new Date()})
    },
    mounted(){
    let self = this;
      getSellerGroupList().then(res => {
        self.groupOptions = [];
        res.data.map(function (item,index) {
          self.groupOptions.push({
            text : item.name,
            value : item.id+'',
          })
        });
        self.columns[3].filters = self.groupOptions;
      })
    },
    methods: {
      fetchMemberList(){
        let self = this
        getTeamMemberList(Object.assign(self.memberQuery,self.userPagination)).then(res => {
          self.sellerCustomerList = res.data.list
          self.userPagination.total = res.data.total
        })
      },

      //
      handleUserManage(record) {
        let self = this
        self.memberQuery.leader_user_id = record.id;
        self.memberQuery.keywords = undefined;
        self.userPagination.page = 1;
        self.fetchMemberList();
        this.userVisible = true
      },
      getSellerCustomerList(){
        let self = this
        getSellerCustomerList({ leader_user_id: self.memberQuery.leader_user_id }).then(res => {
          self.sellerCustomerList = res.data.list
        })
      },
      changeLeader(record){
        let self = this;
        self.userFormData.user_id = record.user_id;
        changeLeader(self.userFormData).then(res => {
          self.$message.success('修改成功')
          self.userFormData.leader_user_id = undefined;
          self.fetchMemberList();
        }).catch(err =>{
          self.$message.error(err.data.msg);
        })
      },
      memberSearch(selectedKeys,confirm){
        let self = this
        confirm();
        self.fetchMemberList();
      },
      memberSearchReset(selectedKeys,confirm){
        let self = this;
        confirm();
        self.memberQuery.keywords = undefined;
        self.fetchMemberList();
      },
        // 查
    onSearch() {
      let self = this;
      self.$refs.table.refresh(true)
    },
     // 删
      resetPassword(record) {
        let self = this
        setPassword({ id: record.id ,password:123456}).then(res => {
          self.$message.success('重置成功')
      })
    },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },

      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    },
    watch: {
      /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    }
  }
</script>

<style scoped>
  .custom-filter-dropdown {
    padding: 8px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }

  .highlight {
    background-color: rgb(255, 192, 105);
    padding: 0px;
  }
</style>